<!--
 	* @author hemengxia
 	创建--积分兑换活动
-->
<template>
  <section class="integral-exchange-activity-manage">
    <div class="manage-title">新建/编辑</div>

    <div v-if="firstForm.mallType==='MALLTYPE01'" class="create-step">
      <el-row>
        <el-col v-for="item in step" :key="item.num" :span="12">
          <div :class="{'active':stepActive == item.num, 'middle': item.num == 2}" class="step-item">
            <span v-if="!item.succ" class="step-item-num">{{ item.num }}</span>
            <i v-if="item.succ" class="el-icon-circle-check" />
            <span class="step-item-txt">{{ item.txt }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="stepActive == 1" class="create-step-con step-one">
      <el-form
        ref="firstForm"
        key="firstForm"
        v-loading="formloading"
        :model="firstForm"
        :rules="firstFormRules"
        label-width="140px"
        class="baseForm"
      >
        <el-form-item label="名称" prop="activityName">
          <el-input v-model="firstForm.activityName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="商城类型" prop="mallType">
          <el-select
            v-model="firstForm.mallType"
            :disabled="state!='create'"
            placeholder="请选择"
            style="width: 100%"
            @change="handleWithdrawalAccountChange"
          >
            <el-option
              v-for="(item, index) in dictList"
              :key="index"
              :label="item.dictName"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="出金账户" prop="accountId">
          <el-select
            v-model="firstForm.accountId"
            :disabled="state!='create'"
            placeholder="请选择"
            style="width: 100%"
            @change="handleWithdrawalAccountChange"
          >
            <el-option
              v-for="(item, index) in accList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="state === 'create'" label="充值记录" prop="rechargeId">
          <el-select
            v-model="firstForm.rechargeId"
            :disabled="state!='create'"
            placeholder="请选择"
            style="width: 100%"
            multiple
          >
            <el-option
              v-for="(item, index) in rechargeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-else label="充值记录" prop="rechargeId">
          <el-card class="box-card">
            <el-table
              :data="rechargeList"
              style="width: 100%"
            >
              <el-table-column
                prop="applyName"
                label="充值名称"
              />
              <el-table-column
                prop="rechargeName"
                label="充值账号名称"
              />
              <el-table-column
                prop="rechargeAmount"
                label="充值金额(元)"
              />
            </el-table>
          </el-card>
        </el-form-item>
        <el-form-item label="用户子账户" prop="subAcntTp">
          <el-select
            v-model="firstForm.subAcntTp"
            :disabled="state!='create'"
            placeholder="请选择"
            style="width: 100%"
            @change="handleAccountChange"
          >
            <el-option
              v-for="(item, index) in accountList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="firstForm.mallType==='MALLTYPE02' && firstForm.subAcntTp!==''" label="专区" prop="dataId">
          <el-button v-if="firstForm.dataId===''" type="primary" size="mini" @click="getArea">选择专区</el-button>
          <el-tag
            v-else
            :closable="state==='create'"
            @close="resetDataId"
          >
            {{ firstForm.dataName || '' }}
          </el-tag>
        </el-form-item>
        <el-form-item v-if="firstForm.mallType==='MALLTYPE02' && firstForm.subAcntTp!==''" label="专区地址" prop="areaAddr">
          <el-input v-model="firstForm.areaAddr" :disabled="state!='create'" readonly />
        </el-form-item>
        <el-form-item label="兑换起止时间" prop="time">
          <el-date-picker
            v-model="firstForm.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            :style="{width:'100%'}"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="使用起止时间" prop="useTime">
          <el-date-picker
            v-model="firstForm.useTime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            :style="{width:'70%','marginRight':'30px'}"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="isEqualTime"
          />
          <el-checkbox v-model="isEqualTime" @change="setEqualTime">与兑换起止时间一致</el-checkbox>
        </el-form-item>
        <el-form-item label="用户兑换金额上限" prop="userUpperLimit">

          <el-input
            v-model="firstForm.userUpperLimit"
            placeholder="请输入配置4"
            maxlength="10"
            @input="clearNoNum($event,'userUpperLimit')"
          />
        </el-form-item>
        <el-form-item label="使用说明" prop="explains">
          <el-input
            v-model="firstForm.explains"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            placeholder="请输入使用说明"
            maxlength="1000"
          />
        </el-form-item>
        <el-form-item class="btn-content">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="stepOneSubmit('firstForm')">
            {{ firstForm.mallType==='MALLTYPE01'?'下一步':'完成' }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="stepActive == 2" class="create-step-con step-two">
      <el-form
        key="secondForm"
        ref="secondForm"
        class="baseForm"
        :model="secondForm"
        :rules="secondFormRules"
        label-width="140px"
      >
        <el-form-item label="活动代码" prop="activityCode">
          <el-input
            v-model.trim="secondForm.activityCode"
            :disabled="state!='create' && secondForm.id!== ''"
            placeholder="请输入活动代码"
          />
        </el-form-item>
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model.trim="secondForm.activityName" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="起止时间" prop="time">
          <el-date-picker
            v-model="secondForm.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            clearable
            :style="{width:'100%'}"
            type="datetimerange"
            disabled
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="签名私钥" prop="rsaSignPrivateKey">
          <el-input v-model.trim="secondForm.rsaSignPrivateKey" type="textarea" :rows="4" placeholder="请输入签名私钥" />
        </el-form-item>

        <el-form-item label="加密公钥" prop="rsaEncryptPublicKey">
          <el-input v-model.trim="secondForm.rsaEncryptPublicKey" type="textarea" :rows="4" placeholder="请输入加密公钥" />
        </el-form-item>
        <el-form-item label="登录密钥" prop="loginAccessKey">
          <el-input v-model.trim="secondForm.loginAccessKey" placeholder="请输入登录密钥" />
        </el-form-item>

        <el-form-item label="接口密钥" prop="interfaceAccessKey">
          <el-input v-model.trim="secondForm.interfaceAccessKey" placeholder="请输入接口密钥" />
        </el-form-item>
        <el-form-item label="收银台地址" prop="collectMoneyAddress">
          <el-input v-model.trim="secondForm.collectMoneyAddress" placeholder="请输入收银台地址" />
        </el-form-item>
        <el-form-item label="访问地址" prop="visitAddress">
          <el-input v-model.trim="secondForm.visitAddress" placeholder="请输入访问地址" />
        </el-form-item>
        <el-form-item label="入金账户" prop="enterAccount">
          <el-select
            v-model="secondForm.enterAccount"
            :disabled="state!='create' && secondForm.id!== ''"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option v-for="(item, index) in enterAccountList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="btn-content">
          <el-button type="primary" @click="upstep(1)">上一步</el-button>
          <el-button type="primary" @click="stepTwoSubmit('secondForm',1)">保存</el-button>
          <el-button type="primary" @click="stepTwoSubmit('secondForm',2)">发布</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--      选择专区-->
    <el-dialog
      v-el-drag-dialog
      v-loading="listLoading"
      custom-class="area"
      title="选择专区"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <el-table :data="areaList">
        <el-table-column label width="35">
          <template slot-scope="scope">
            <el-radio v-model="radioObj" :disabled="scope.row.childAccount.split(',').indexOf(firstForm.subAcntTp)===-1" :label="scope.row">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column property="name" label="专区名称" width="150" />
        <el-table-column label="图片" width="200">
          <template slot-scope="scope">
            <el-image
              style="width: 150px; height: 150px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
            />
          </template>
        </el-table-column>
        <el-table-column property="childAccount" label="子账户类型" width="150" />
        <el-table-column property="describe" label="说明" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.pageSize"
        @pagination="getArea"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setDataId">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>

import {
  getAcc, insert,
  update,
  get,
  getSecondFormInfo,
  getAccountList,
  createOneStep,
  updateOneStep,
  queryRechargeRecord,
  getInAcc,
  queryPageByArea
} from '@/views/welfare/exchange/api/index'
import CryptoJS from '@/utils/aesJiaJM'
import ActivityList from '@/views/welfare/exchange/components/activityList'
import { getDic } from '@/views/dockingmanage/api'
import elDragDialog from '@/directive/el-drag-dialog'
import Pagination from '@/components/Pagination'
export default {
  name: 'IntegralExchangeActivityManage',
  components: { ActivityList, Pagination },
  directives: { elDragDialog },
  data() {
    return {
      radioObj: '',
      listQuery: {
        page: 1,
        pageSize: 10,
        name: ''
      },
      listLoading: false,
      total: 0,
      dialogVisible: false,
      areaName: '',
      dictList: [],
      state: 'create',
      formloading: false,
      areaList: [],
      firstForm: {
        id: '',
        mallType: 'MALLTYPE01',
        areasubAcntTps: '',
        areaAddr: '',
        dataId: '',
        dataName: '',
        activityName: '',
        time: [],
        useTime: [],
        explains: '', // 说明
        receiveStartTime: '', // 兑换开始时间
        receiveEndTime: '', // 兑换结束时间
        effectiveStartTime: '', // 使用开始时间
        effectiveEndTime: '', // 使用结束时间
        userUpperLimit: 1,
        subAcntTp: '', // 用户子账户
        accountId: '',
        rechargeId: []// 充值记录id
      },

      firstFormRules: {
        activityName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 100,
          message: '长度在 1 到 100 个字符',
          trigger: 'blur'
        }
        ],
        areaAddr: [{
          required: true,
          message: '请输入专区地址',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 500,
          message: '长度在 1 到 500 个字符',
          trigger: 'blur'
        }
        ],
        dataId: [{
          required: true,
          message: '请选择专区',
          trigger: 'change'
        }],
        mallType: [{
          required: true,
          message: '请选择商城类型',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '请选择兑换起止时间',
          trigger: 'blur'
        }],
        useTime: [{
          required: true,
          message: '请选择使用起止时间',
          trigger: 'blur'
        }],
        userUpperLimit: [{
          required: true,
          message: '请设置兑换金额上限',
          trigger: 'blur'
        }],

        subAcntTp: [{
          required: true,
          message: '请选择用户子账户',
          trigger: 'blur'
        }],
        accountId: [{
          required: true,
          message: '请选择出金账户',
          trigger: 'blur'
        }],
        rechargeId: [{
          required: true,
          message: '请选择充值记录',
          trigger: 'blur'
        }],
        explains: [{
          required: true,
          message: '请输入使用说明',
          trigger: 'blur'
        }]
      },
      accList: [], // 出金账户
      accountList: [], // 用户子账号列表
      showActivityListDialog: false,
      stepActive: 1,
      step: [
        { num: 1, txt: '新建/编辑', succ: false },
        { num: 2, txt: '商城专区配置', succ: false }
      ],
      rechargeList: [], // 充值记录
      secondForm: {
        dataId: '',
        id: '',
        activityCode: '',
        activityName: '',
        startDate: '',
        endDate: '',
        rsaSignPrivateKey: '',
        rsaEncryptPublicKey: '',
        loginAccessKey: '',
        interfaceAccessKey: '',
        collectMoneyAddress: '',
        visitAddress: 'https://jxi-fuli-m.jd.com/newIndex',
        enterAccount: '',
        time: []
      },
      secondFormRules: {
        activityCode: [{ required: true, message: '请输入活动代码', trigger: 'blur' }],
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        rsaSignPrivateKey: [{ required: true, message: '请输入签名私钥', trigger: 'blur' }],
        rsaEncryptPublicKey: [{ required: true, message: '请输入加密公钥', trigger: 'blur' }],
        loginAccessKey: [{ required: true, message: '请输入登录密钥', trigger: 'blur' }],
        interfaceAccessKey: [{ required: true, message: '请输入接口密钥', trigger: 'blur' }],
        collectMoneyAddress: [{ required: true, message: '请输入收银台地址', trigger: 'blur' }],
        enterAccount: [{ required: true, message: '请选择入金账户', trigger: 'change' }],
        visitAddress: [{ required: true, message: '请输入访问地址', trigger: 'blur' }],
        time: [{
          required: true,
          message: '请选择起止时间',
          trigger: 'blur'
        }]
      },
      enterAccountList: [], // 入金账户列表
      isEqualTime: false,
      curData: ''
    }
  },
  async created() {
    this.getDicList()
    this.state = this.$route.query.type === 'c' ? 'create' : 'update'
    if (this.$route.query.type === 'u') {
      if (this.$route.query.i) {
        this.getData(this.$route.query.i)
      } else {
        this.$message({
          showClose: true,
          message: '参数异常！',
          type: 'warning',
          onClose: () => {
            this.$router.back()
          }
        })
      }
    } else {
      // 设置收银台地址
      this.secondForm.collectMoneyAddress = window.location.origin + '/#/welfarePay'
    }
    this.accList = await this.getAccFun()
    this.accountList = await this.getAccountList()
    this.enterAccountList = await this.getInAcc()
  },
  methods: {

    resetDataId() {
      this.firstForm.dataId = ''
      this.firstForm.areasubAcntTps = ''
      this.areaName = ''
      this.radioObj = ''
      this.firstForm.dataName = ''
      this.firstForm.areaAddr = ''
    },
    setDataId() {
      if (!this.radioObj) {
        this.$message.error('请选择专区')
        return
      }
      console.log(this.radioObj)
      this.firstForm.dataId = this.radioObj.id
      this.firstForm.dataName = this.radioObj.name
      this.firstForm.areasubAcntTps = this.radioObj.childAccount
      this.firstForm.areaAddr = this.radioObj.prefectureUrl
      this.areaName = this.radioObj.name
      this.dialogVisible = false
    },
    getArea() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.listLoading = true
      return new Promise((resolve, reject) => {
        queryPageByArea(this.listQuery).then((res) => {
          this.areaList = res.data.data.rows
          this.total = res.data.data.total
          this.listLoading = false
          this.dialogVisible = true
          loading.close()
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },
    getDicList() {
      const obj = {
        dictCode: 'MALLTYPE'
      }
      getDic(obj).then(res => {
        this.dictList = (res.data.data && res.data.data.length > 0) ? res.data.data[0].list : []
      })
    },
    /**
     * 将使用起止时间  设置为与兑换时间一致
     * */
    setEqualTime(val) {
      if (val) {
        this.firstForm.useTime = this.firstForm.time
      }
    },
    /**
     * 获取入金账户列表
     * */
    getInAcc() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getInAcc({ accountStatus: 'ZHZT01' }).then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.id,
            label: `${a.name}(${CryptoJS.$aesJieM(a.accountNumber)})`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    onCancel() {
      this.$router.back()
    },
    /**
     * 返回上一步
     * */
    upstep(step) {
      this.step.forEach(item => {
        if (item.succ) {
          item.succ = false
        }
      })
      const index = step - 1
      this.stepActive = step
      this.step[index].succ = false
    },
    // 点击第一个下一步
    stepOneSubmit(formName) {
      if (this.firstForm.mallType === 'MALLTYPE02') {
        if (this.firstForm.areasubAcntTps.split(',').indexOf(this.firstForm.subAcntTp) === -1) {
          this.$message.error('用户选择的子账户类型与专区子账户类型不一致')
          return
        }
      }
      if (this.state === 'create') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.firstForm)
            params['receiveStartTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
            params['receiveEndTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
            params['effectiveStartTime'] = params.useTime && params.useTime.length > 0 ? params.useTime[0] : ''
            params['effectiveEndTime'] = params.useTime && params.useTime.length > 0 ? params.useTime[1] : ''
            params['rechargeId'] = params.rechargeId.length > 0 ? params.rechargeId.join(',') : ''
            delete params['time']
            delete params['useTime']
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            return new Promise((resolve, reject) => {
              createOneStep(params).then((res) => {
                this.secondForm.dataId = res.data.data
                this.$notify({
                  title: '成功',
                  message: '处理成功',
                  type: 'success',
                  duration: 2000
                })
                loading.close()
                if (this.firstForm.mallType === 'MALLTYPE01') {
                  this.secondForm.time = this.firstForm.time
                  this.stepActive = 2
                  this.step[0].succ = true
                } else {
                  this.$router.back()
                }
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.firstForm)
            params['receiveStartTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
            params['receiveEndTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
            params['effectiveStartTime'] = params.useTime && params.useTime.length > 0 ? params.useTime[0] : ''
            params['effectiveEndTime'] = params.useTime && params.useTime.length > 0 ? params.useTime[1] : ''
            params['rechargeId'] = params.rechargeId.length > 0 ? params.rechargeId.join(',') : ''
            delete params['time']
            delete params['useTime']
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            return new Promise((resolve, reject) => {
              updateOneStep(params).then((res) => {
                this.$notify({
                  title: '成功',
                  message: '处理成功',
                  type: 'success',
                  duration: 2000
                })
                loading.close()
                if (res.data.data) {
                  this.secondForm.dataId = res.data.data
                }
                if (this.firstForm.mallType === 'MALLTYPE01') {
                  this.secondForm.time = this.firstForm.time
                  this.stepActive = 2
                  this.step[0].succ = true
                } else {
                  this.$router.back()
                }
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    /**
     * 点击发布
     * type  1是保存 2是发布
     * */
    stepTwoSubmit(formName, type) {
      if (this.state === 'create' || (this.curData != '' && !this.curData.dataId) || !this.secondForm.id) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.secondForm)
            params['startDate'] = params.time && params.time.length > 0 ? params.time[0] : ''
            params['endDate'] = params.time && params.time.length > 0 ? params.time[1] : ''
            delete params['time']
            params['dataStatus'] = type === 1 ? 'GIPSTSTUS02' : 'GIPSTSTUS01'
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            return new Promise((resolve, reject) => {
              insert(params).then((res) => {
                this.id = res.data.data.id
                this.$notify({
                  title: '成功',
                  message: '处理成功',
                  type: 'success',
                  duration: 2000
                })
                loading.close()
                this.onCancel()
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.secondForm)
            params['startDate'] = params.time && params.time.length > 0 ? params.time[0] : ''
            params['endDate'] = params.time && params.time.length > 0 ? params.time[1] : ''
            delete params['time']
            params['dataStatus'] = type === 1 ? 'GIPSTSTUS02' : 'GIPSTSTUS01'
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
            })
            return new Promise((resolve, reject) => {
              update(params).then((res) => {
                this.$notify({
                  title: '成功',
                  message: '处理成功',
                  type: 'success',
                  duration: 2000
                })
                loading.close()
                this.onCancel()
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    /**
     * 选择了活动
     * */
    selectConfig(data) {
      this.form.djxtdyhd = data.id
      this.form.djxtdyhdName = data.title
      this.showActivityListDialog = false
    },
    /**
     * 设置输入框限制输入数字和小数点后保留小数个数
     * */
    clearNoNum(value, name) {
      this.firstForm[name] =
          ('' + value) // 第一步：转成字符串
            .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
            .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
            .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
            .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到4位小数
    },
    /**
     * 删除选择的活动
     * */
    closeTag() {
      this.form.djxtdyhdName = ''
      this.form.djxtdyhd = ''
    },
    /**
     * 选择用户子账户
     * */
    handleAccountChange(value) {
      const obj = this.accountList.find(a => a.subAcntTp === value)
      this.$alert(`您选择的用户子账户是：${obj.subAcntNm}，状态为：${obj.subAcntSt == 1 ? '禁用' : '启用'}，
        ${obj.subAcntStartTm ? '有效期是：' + this.formatTime(obj.subAcntStartTm) + '至' : ''}
        ${obj.subAcntEndTm ? this.formatTime(obj.subAcntEndTm) + ']' : ''}`, '提示', {
        confirmButtonText: '确定'
      })
    },
    /**
     * 选择出金账户--查询该出金账户对应的充值记录
     * */
    async handleWithdrawalAccountChange(value) {
      this.firstForm.rechargeId = ''
      this.rechargeList = await this.getRechargeRecord(value)
    },

    formatTime(str) {
      return str && str.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5:$6')
    },
    /**
     * 获取出金账户
     * */
    getAccFun() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getAcc({ accountStatus: 'ZHZT01' }).then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.id,
            label: `${a.name}(${CryptoJS.$aesJieM(a.accountNumber)})`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 获取用户子账号
     * */
    getAccountList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getAccountList().then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.subAcntTp,
            label: `${a.subAcntTp}-${a.subAcntNm}[${a.subAcntSt == 1 ? '禁用' : '启用'}]${a.subAcntStartTm ? '[' + this.formatTime(a.subAcntStartTm) + '至' : ''}${a.subAcntEndTm ? this.formatTime(a.subAcntEndTm) + ']' : ''}`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 获取充值记录
     * */
    getRechargeRecord(accountId) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        queryRechargeRecord({ accountId: accountId }).then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.id,
            label: `${a.applyName}(${a.rechargeAmount}元)`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    /**
     * 获取详情
     */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: id }).then(res => {
          loading.close()
          const data = res.data.data
          console.log('data', data)
          this.curData = res.data.data || ''
          for (const key in this.firstForm) {
            if (key === 'time') {
              if (data['receiveStartTime'] && data['receiveEndTime']) {
                this.firstForm[key] = [data['receiveStartTime'], data['receiveEndTime']]
              }
            } else if (key === 'useTime') {
              if (data['effectiveStartTime'] && data['effectiveEndTime']) {
                this.firstForm[key] = [data['effectiveStartTime'], data['effectiveEndTime']]
              }
            } else if (key === 'rechargeId') {
              this.firstForm[key] = data['rechargeId'] ? data['rechargeId'].split(',') : ''
            } else if (key === 'mallType') {
              this.firstForm[key] = data['mallType'] ? data['mallType'] : 'MALLTYPE01'
            } else {
              this.firstForm[key] = data[key]
            }
          }
          this.rechargeList = data.rechargeList
          this.isEqualTime = data.receiveStartTime === data.effectiveStartTime && data.receiveEndTime === data.effectiveEndTime
          if (data.dataId) {
            this.secondForm.dataId = data.id
            this.secondForm.id = data.dataId
            this.getSecondFormInfo(data.dataId)
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 获取第二页详情
     */
    getSecondFormInfo(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getSecondFormInfo({ dataId: id }).then(res => {
          loading.close()
          const data = res.data.data
          if (data) {
            for (const key in this.secondForm) {
              if (key === 'time') {
                if (data['startDate'] && data['endDate']) {
                  this.secondForm[key] = [data['startDate'], data['endDate']]
                }
              } else if (key !== 'dataId' && key !== 'id') {
                this.secondForm[key] = data[key]
              }
            }
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/mixin.scss';

.integral-exchange-activity-manage {
  background-color: #fff;
  padding: 20px;
  .area{
    max-height: 98vh;
    img{
      width: 150px;
      height: 150px;
    }
  }
  .el-dialog .el-dialog__body{
    max-height: 76vh;
  }
  .el-dialog .el-dialog__footer{
    text-align: center;
  }
  .select-data {
    display: inline-block;
    background: rgba(246, 246, 246, 1);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding: 0 10px;
    margin-right: 5px;
    margin-bottom: 8px;

    i {
      cursor: pointer;
      padding-left: 5px;
    }
  }

  .selectbtn {
    display: inline-block;
    width: 120px;
    background: rgba(255, 255, 255, 1);
    border: 1px dotted $mainColor;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: $mainColor;
    text-align: center;
    cursor: pointer;
  }

  .create-step {
    background-color: #ffffff;

    .step-item {
      text-align: center;
      height: 60px;
      line-height: 60px;

      .step-item-num {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        border: 1px solid rgba(240, 240, 240, 1);
        border-radius: 50%;
        font-size: 12px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(198, 198, 198, 1);
        margin-right: 5px;
      }

      .step-item-txt {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }

      i {
        font-size: 40px;
        color: $mainColor;
        vertical-align: middle;
      }

      &.active {
        .step-item-num {
          background: $mainColor;
          border: 1px solid $mainColor;
          color: #ffffff;
        }

        .step-item-txt {
          color: $mainColor;
        }
      }
    }

    .middle {
      position: relative;

      &:before {
        content: "";
        height: 1px;
        background-color: #F0F0F0;
        position: absolute;
        left: -40%;
        right: 64%;
        top: 50%;
      }

      /* &:after {
         content: "";
         height: 1px;
         background-color: #F0F0F0;
         position: absolute;
         left: 80%;
         right: -20%;
         top: 50%;
       }*/
    }
  }

  .create-step-con {
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px 0;
    min-height: 500px;

    .baseForm {
      width: 850px !important;
      margin: 0 auto;

      .el-select {
        width: 100%;
      }

      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
    }

    .join-conditions-content {
      border: 1px dashed #eee;
      padding: 10px;
      margin-bottom: 20px;

      ul {
        padding: 0;
        display: flex;

        li {
          list-style: none;
          margin: 5px;
          padding: 5px;
          border: solid 1px #eee;

          span {
            color: #a6a6a6;
          }
        }

        font-size: 16px;
      }
    }

    &.step-two {
      position: relative;

      .step-two-notdata {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -141px;
        margin-top: -137px;

        .notdata-btn {
          text-align: center;
        }
      }

      .down-btn {
        text-align: center;
        padding: 40px 0;
      }

    }

    &.step-three {
      .container {
        width: 660px !important;
        margin: 0 auto;

        .down-btn {
          text-align: center;
          margin-top: 20px;
        }

      }
    }
  }

}
</style>
